<template>
        <div>
                <van-nav-bar title="预约时间" left-text="" left-arrow @click-left="onClickLeft" />
                <div style="
        height:620px;
        overflow-y: auto;
        ">
                        <div style="
        padding: 15px;
        ">
                                <p style="
        font-weight:700;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        ">双肾及肾血管彩色多普勒<span style="
        display: flex;
        "><img style="
        width: 18px;
        height: 18px;
        margin-right: 5px;
        " src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u800.svg"
                                                        alt=""><span>2020年1月</span></span></p>

                        </div>
                        <div style="
                width:375px;
                height:74px;
                background-color:white;      
                box-shadow:0px 0px 8px rgba(242, 242, 242, 1);       
                display:flex ;
                justify-content:space-around;  
                ">
                                <div :class="count == 0 ? 'z3' : 'z1'" @click="count = 0">周一今日</div>
                                <div :class="count == 1 ? 'z3' : 'z1'" @click="count = 1">周二29</div>
                                <div :class="count == 2 ? 'z3' : 'z1'" @click="count = 2">周三30</div>
                                <div :class="count == 3 ? 'z3' : 'z2'" @click="count = 3">周四31</div>
                                <div :class="count == 4 ? 'z3' : 'z2'" @click="count = 4">周五11</div>
                                <div :class="count == 5 ? 'z3' : 'z2'" @click="count = 5">周六12</div>


                        </div>
                        <div v-if="count == 0" style="
                        color:#7F7F7F;
                        font-weight:400;
                        padding:15px;
                        ">
                                <p>请选择检查诊室</p>
                                <div style="
                        display:flex;
                         margin-top: 15px;
                         justify-content: space-between;
                        ">
                                        <div :class="flage == true ? 'zq' : 'xw'" @click="flage1">CT诊室一</div>
                                        <div :class="flage == false ? 'zq' : 'xw'" @click="flage2">CT诊室二</div>

                                </div>
                        </div>
                        <div v-if="count == 1" style="
                        color:#7F7F7F;
                        font-weight:400;
                        padding:15px;
                        ">
                                <p>请选择检查诊室</p>
                                <div style="
                        display:flex;
                         margin-top: 15px;
                         justify-content: space-between;
                        ">
                                        <div :class="flage0 == true ? 'zq' : 'xw'" @click="flage3">CT诊室一</div>
                                        <div :class="flage0 == false ? 'zq' : 'xw'" @click="flage4">CT诊室二</div>

                                </div>
                        </div>
                        <div v-if="count == 2" style="
                        color:#7F7F7F;
                        font-weight:400;
                        padding:15px;
                        ">
                                <p>请选择检查诊室</p>
                                <div style="
                        display:flex;
                         margin-top: 15px;
                         justify-content: space-between;
                        ">
                                        <div :class="flage0 == true ? 'zq' : 'xw'" @click="flage3">CT诊室一</div>
                                        <div :class="flage0 == false ? 'zq' : 'xw'" @click="flage4">CT诊室二</div>

                                </div>
                        </div>
                        <div v-if="flage0 == true" style="
                        color:#7F7F7F;
                        font-weight:400;
                        padding:15px;
                        ">
                                <p>请选择适合您的预约时间段</p>
                                <div style="
                        display:flex;
                         margin-top: 15px;
                         justify-content: space-between;
                         flex-wrap: wrap;
                        ">
                                        <div class="xwq1" @click="g5">
                                                <p style="
                                                font-weight:700;
                                                font-size:14px;
                                                color:#000000;
                                                ">08:30-09:30</p>
                                                <p style="
                                                margin-top: -18px;
                                                 font-size:14px;
                                                color:#13C2C2;
                                                ">余10</p>
                                        </div>
                                        <div class="xwq1">
                                                <p style="
                                                font-weight:700;
                                                font-size:14px;
                                                color:#000000;
                                                ">09:30-10:30</p>
                                                <p style="
                                                margin-top: -18px;
                                                 font-size:14px;
                                                color:#AAAAAA;
                                                ">余0</p>
                                        </div>
                                        <div class="xwq1" style="margin-top: 15px;" @click="g5">
                                                <p style="
                                                font-weight:700;
                                                font-size:14px;
                                                color:#000000;
                                                ">10:30-11:30</p>
                                                <p style="
                                                margin-top: -18px;
                                                 font-size:14px;
                                                color:#13C2C2;
                                                ">余5</p>
                                        </div>
                                        <div class="xwq1" style="margin-top: 15px;" @click="g5">
                                                <p style="
                                                font-weight:700;
                                                font-size:14px;
                                                color:#000000;
                                                ">
                                                        14:30-15:30</p>
                                                <p style="
                                                margin-top: -18px;
                                                 font-size:14px;
                                                color:#13C2C2;
                                                ">余6</p>
                                        </div>
                                        <div class="xwq1" style="margin-top: 15px;" @click="g5">
                                                <p style="
                                                font-weight:700;
                                                font-size:14px;
                                                color:#000000;
                                                ">15:30-16:30</p>
                                                <p style="
                                                margin-top: -18px;
                                                 font-size:14px;
                                                color:#13C2C2;
                                                ">余8</p>
                                        </div>
                                        <div class="xwq1" style="margin-top: 15px;" @click="g5">
                                                <p style="
                                                font-weight:700;
                                                font-size:14px;
                                                color:#000000;
                                                ">
                                                        16:30-15:30</p>
                                                <p style="
                                                margin-top: -18px;
                                                 font-size:14px;
                                                color:#13C2C2;
                                                ">余10</p>
                                        </div>

                                </div>
                        </div>
                        <div v-if="flage0 == false" style="
                        color:#7F7F7F;
                        font-weight:400;
                        padding:15px;
                        ">
                                <p>请选择适合您的预约时间段</p>
                                <div style="
                        display:flex;
                         margin-top: 15px;
                         justify-content: space-between;
                         flex-wrap: wrap;
                        ">
                                        <div class="xwq1" style="margin-top: 15px;" @click="g5">
                                                <p style="
                                                font-weight:700;
                                                font-size:14px;
                                                color:#000000;
                                                ">10:30-11:30</p>
                                                <p style="
                                                margin-top: -18px;
                                                 font-size:14px;
                                                color:#13C2C2;
                                                ">余5</p>
                                        </div>
                                        <div class="xwq1" style="margin-top: 15px;" @click="g5">
                                                <p style="
                                                font-weight:700;
                                                font-size:14px;
                                                color:#000000;
                                                ">
                                                        14:30-15:30</p>
                                                <p style="
                                                margin-top: -18px;
                                                 font-size:14px;
                                                color:#13C2C2;
                                                ">余6</p>
                                        </div>
                                        <div class="xwq1" style="margin-top: 15px;" @click="g5">
                                                <p style="
                                                font-weight:700;
                                                font-size:14px;
                                                color:#000000;
                                                ">15:30-16:30</p>
                                                <p style="
                                                margin-top: -18px;
                                                 font-size:14px;
                                                color:#AAAAAA;
                                                ">余0</p>
                                        </div>
                                        <div class="xwq1" style="margin-top: 15px;" @click="g5">
                                                <p style="
                                                font-weight:700;
                                                font-size:14px;
                                                color:#000000;
                                                ">
                                                        16:30-15:30</p>
                                                <p style="
                                                margin-top: -18px;
                                                 font-size:14px;
                                                color:#13C2C2;
                                                ">余10</p>
                                        </div>

                                </div>
                        </div>

                </div>

        </div>
        <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '40%' }">
                <div style="
        margin-top: 10px;
                    ">
                        <h3 style="
        text-align: center;
        ">改签确认预约</h3>
                        <p style="
            margin-top: -22px;
            margin-left: 340px;
            font-size: 20px;
          " @click="showBottom = false">x</p>
                        <div style="
           padding: 30px;
           display: flex;
           justify-content: space-between;
           ">
                                <p style="
                color:#7F7F7F;
                font-size: 14px;
                ">就诊患者</p>
                                <p style="
                color:#000000;
                font-size: 14px;
                ">王小柯</p>
                        </div>
                        <div style="
           padding: 30px;
           display: flex;
           justify-content: space-between;
           margin-top: -45px;
           ">
                                <p style="
                color:#7F7F7F;
                font-size: 14px;
                ">检查项目</p>
                                <p style="
                color:#000000;
                font-size: 14px;
                ">双肾及肾血管彩色多普勒</p>
                        </div>
                        <div style="
           padding: 30px;
           display: flex;
           justify-content: space-between;
           margin-top: -45px;
           ">
                                <p style="
                color:#7F7F7F;
                font-size: 14px;
                ">检查诊室</p>
                                <p style="
                color:#000000;
                font-size: 14px;
                ">CT诊室一</p>
                        </div>
                        <div style="
           padding: 30px;
           display: flex;
           justify-content: space-between;
           margin-top: -45px;
           ">
                                <p style="
                color:#7F7F7F;
                font-size: 14px;
                ">预约时间</p>
                                <p style="
                color:#000000;
                font-size: 14px;
                font-weight: 700;
                ">2020-01-01 08:30-09:30</p>
                        </div>
                        <button style="
                 width: 313px;
                 height: 40px;
                 background-color: #1677ff;
                 border-radius: 5px;
                 margin-left: 30px;
                 font-size: 14px;
                 color: white;
                 font-weight: 400;
                 border:0;
                " @click="qweerty">
                                <span v-if="q">确认</span>
                                <span v-if="!q" style="display: flex;
                align-items: center;
                justify-content: center;
                "><van-loading type="spinner" size="20px" />正在改签中</span>
                        </button>

                </div>

        </van-popup>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
import { ref } from 'vue'
const router = useRouter()
const showBottom = ref(false)
const q = ref(true)
const qweerty = () => {
        q.value = false
        setTimeout(() => {
                ElNotification({
                        dangerouslyUseHTMLString: true,
                        message: '<strong>改签成功</strong>',
                })
                router.push('/YiJiYuYue1')
        }, 4000)
}
const onClickLeft = () => {
        router.back()
}
const renmen = ref([
        {
                name: "王小轲",
                ma: "2015*****10"
        },
        {
                name: "李玲玲",
                ma: "2015*****11"
        },
])
const count = ref(0)
const flage = ref(true)
const flage0 = ref(true)

const flage1 = () => {
        flage.value = true
}
const dian = (i: any) => {
        ii.value = i
        showBottom.value = false

}
const ii = ref({
        name: "王小轲",
        ma: "2015*****10"
})

const flage2 = () => {
        flage.value = false
}
const flage3 = () => {
        flage0.value = true
}
const flage4 = () => {
        flage0.value = false
}
const g5 = () => {
        showBottom.value = true
}

</script>

<style scoped>
.z1 {
        width: 40px;
        height: 47px;
        background-color: white;
        border-radius: 5px;
        margin-top: 13px;
        font-weight: 400;
        text-align: center;
        font-size: 14px;
        color: #13C2C2;
}

.z2 {
        width: 40px;
        height: 47px;
        background-color: white;
        border-radius: 5px;
        margin-top: 13px;
        font-weight: 400;
        text-align: center;
        font-size: 14px;
        color: #AAAAAA;
}

.z3 {
        width: 40px;
        height: 47px;
        background-color: #1677ff;
        border-radius: 5px;
        margin-top: 13px;
        font-weight: 400;
        text-align: center;
        font-size: 14px;
        color: #ffffff;
}

.zq {
        width: 160px;
        height: 48px;
        background-color: rgba(230, 244, 255, 1);
        text-align: center;
        line-height: 48px;
        border-radius: 8px;
        border: 1px solid rgba(230, 244, 255, 1);
}

.xw {
        width: 160px;
        height: 48px;
        background-color: #ffffff;
        text-align: center;
        line-height: 48px;
        border-radius: 8px;
        border: 1px solid #d7d7d7;
}

.xwq1 {
        width: 160px;
        height: 74px;
        background-color: #ffffff;
        text-align: center;
        line-height: 48px;
        border-radius: 8px;
        border: 1px solid #d7d7d7;
}
</style>